<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
    <style>
        .father{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        .four{
            width: 300px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="root">
        <!--1. a标签拥有跳转网址的默认事件 
             @click.prevent='clione' 点击事件后执行clione函数，并停止默认行为-->
        <a @click.prevent='clione' href="https://www.bilibili.com/">prevent事件修饰</a>
        <div class="father" @click="clithree">
            <!-- 2. stop阻止了事件冒泡 -->
            <div class="son" @click.stop="clitwo"></div>
        </div>

        <!-- 3. once,事件只触发一次 -->
        <div class="four" @click.once="clifour"></div>
         <br>
         <br>
         <br>
        <!-- 4. 捕捉阶段，触发事件 -->
        <div class="father" @click.capture="clifive(1)">
            box1
            <!-- 2. stop阻止了事件冒泡 -->
            <div class="son" @click="clifive(2)">box2</div>

            <!-- 冒泡时，点击box2,先打印2，再打印1
            使用capture时，捕捉阶段触发事件，先打印1，再打印2 -->
        </div>

        
    </div>
    <script>
        //Vue中的事件修饰符: 用于修饰事件
        // 1. prevent:阻止默认事件(常用) ;
        // 2.stop:阻止事件冒泡(常用) 
        // 3.once:事件只触发一-次(常用) ;
        // 4.capture:使用事件的捕获模式;
        // 5.self:只有event. target是当前操作的元素是才触发事件;
        // 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕; 
        const vm = new Vue({
            el:'.root',
            data:{
                name:'中国！'
            },
            methods:{
                clione(){
                    alert('one')
                },
                clitwo(){
                    alert('two')
                },
                clithree(){
                    alert('three')
                },
                clifour(){
                    alert('four')
                },
                clifive(num){
                    alert(num)
                }
            }
})






    </script>
</body>

</html>